<extend name="work/base"/>
<block name="content">
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="wx_box">
                <div class="wechat">
                    <div class="wx_sub_menu">
                        <div class="wx_sub_button">
                            <table class="layui-table">
                                <tr>
                                    <td id="b11" class="wxbutton">+</td>
                                </tr>
                                <tr>
                                    <td id="b12" class="wxbutton">+</td>
                                </tr>
                                <tr>
                                    <td id="b13" class="wxbutton">+</td>
                                </tr>
                                <tr>
                                    <td id="b14" class="wxbutton">+</td>
                                </tr>
                                <tr>
                                    <td id="b15" class="wxbutton">+</td>
                                </tr>
                                </tr>
                            </table>
                        </div>
                        <div class="wx_sub_button">
                            <table class="layui-table">
                                <tr>
                                    <td id="b21" class="wxbutton">+</td>
                                </tr>
                                <tr>
                                    <td id="b22" class="wxbutton">+</td>
                                </tr>
                                <tr>
                                    <td id="b23" class="wxbutton">+</td>
                                </tr>
                                <tr>
                                    <td id="b24" class="wxbutton">+</td>
                                </tr>
                                <tr>
                                    <td id="b25" class="wxbutton">+</td>
                                </tr>
                                </tr>
                            </table>
                        </div>
                        <div class="wx_sub_button">
                            <table class="layui-table">
                                <tr>
                                    <td id="b31" class="wxbutton">+</td>
                                </tr>
                                <tr>
                                    <td id="b32" class="wxbutton">+</td>
                                </tr>
                                <tr>
                                    <td id="b33" class="wxbutton">+</td>
                                </tr>
                                <tr>
                                    <td id="b34" class="wxbutton">+</td>
                                </tr>
                                <tr>
                                    <td id="b35" class="wxbutton">+</td>
                                </tr>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="wx_menu">
                        <div class="wx_main_button wxbutton" id="b10">+</div>
                        <div class="wx_main_button wxbutton" id="b20">+</div>
                        <div class="wx_main_button wxbutton" id="b30">+</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md8">

            <form class="layui-form" action="{:url()}" style="width: 500px;" method="post" lay-filter="wxbuttoninfo">
                <blockquote class="layui-elem-quote">
                    一级菜单（总菜单）中如果选择禁用，对应的分菜单也将不能生效<br>
                    《菜单类型》中选择[跳转URL]可以填写自己的外部URL<br>
                    《预置内容》在《菜单类型》中选择[跳转URL]才会生效<br>


                </blockquote>

                <div class="layui-form-item">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name='name' id="name" class="layui-input"
                               placeholder="一级菜单5个汉字，二级菜单七个汉字">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单类型</label>
                    <div class="layui-input-block">
                        <select name="type" id="type">
                            <volist name="wx_button" id="vo" key="k">
                                <option value="{$k}"> {$vo}</option>
                            </volist>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单状态</label>
                    <div class="layui-input-block">
                        <select name="status" lay-verify="required" id="status">
                            <option value="1">正常</option>
                            <option value="2">禁用</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">预置内容</label>
                    <div class="layui-input-block">
                        <select name="wx_menu_url" id="wx_menu_url">
                            <option value="">根据情况选择</option>
                            <volist name="wx_menu_url" id="vo" key="k">
                                <option value="{$vo.id}"> {$vo.name}</option>
                            </volist>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">自定义内容</label>
                    <div class="layui-input-block">
                        <input type="text" name="info" id="info" class="layui-input"
                               placeholder="url或单击的key值或media_id">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">附加内容</label>
                    <div class="layui-input-block">
                        <input type="text" name="msg" id="msg" class="layui-input"
                               placeholder="小程序">
                    </div>
                </div>
                <input type="hidden" name="id" value="" id="id">
                <input type="hidden" name="bid" value="" id="bid">

                <button type="button" lay-submit class="layui-btn layui-btn-fluid  layui-btn-normal"
                        lay-filter="tempsave">暂存当前菜单设置（本菜单临时保存）
                </button>
                <br>
                <br>
                <button type="button" lay-submit class="layui-btn layui-btn-fluid  layui-btn-normal"
                        lay-filter="wxsave">全部设置完成保存并发布（5分钟左右生效）
                </button>
            </form>
        </div>
    </div>
    <style>
        .wechat {
            top: 20px;
            width: 419px;
            height: 907px;
            background-image: url("/static/admin/img/wechat.png");
            padding: 5px;
            border: 1px solid #1E9FFF;
        }
        .wx_sub_menu {
            /*width: 334px;*/
            height: 50px;
            padding-left: 65px;
            display: flex;
            flex-direction: row;
            position: absolute;
            bottom: 260px;
        }
        .wx_menu {
            /*width: 334px;*/
            height: 50px;
            padding-left: 65px;
            display: flex;
            flex-direction: row;
            position: absolute;
            bottom: 35px;
        }
        .wx_sub_button {
            width: 90px;
            margin-right: 30px;
            color: #616161;
            text-align: center;
            font-size: 16px;
        }
        .wx_main_button {
            width: 110px;
            margin-right: 10px;
            color: #616161;
            text-align: center;
            font-size: 16px;
        }
    </style>
</block>
<block name="script">
    <script type="text/javascript">
        layui.use(['element', 'table'], function () {
            var element = layui.element
                ,$=layui.$
                , form = layui.form;
            var tag_id = 0;
            var rule;
            getrule();
            form.on('submit(wxsave)', function (data) {
                $.ajax({
                    url: "{:Url('index')}",
                    type: 'post',
                    dataType: 'json',
                    data: {data:rule}
                })
                    .done(function (res) {
                        if (res.data == null) {
                            layer.msg('没有内容', {
                                time: 1500,
                                icon: 5
                            });
                        } else {
                            layer.msg(res.msg, {
                                time: 1500,
                                icon: 1
                            });
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });


                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            form.on('submit(tempsave)', function (data) {
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                var new_menu = data.field;
                $.each(rule, function (key, value) {
                    if (value.bid == new_menu.bid) {
                        rule[key] = new_menu;
                        $('#' + new_menu.bid).html(new_menu.name);
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });


            $('.wxbutton').click(function () {
                var bid = $(this).attr('id');
                $.each(rule, function (key, value) {
                    if (value.bid == bid) {

                        console.log(value);
                        form.val("wxbuttoninfo", {
                            "name": value.name
                            , "type": value.type
                            , "status": value.status
                            , "wx_menu_url": value.wx_menu_url
                            , "info": value.info
                            , "msg": value.msg
                            , 'id': value.id
                            , 'bid': value.bid
                        });


                    }
                });

            });


            function view_menu(rule) {
                $.each(rule, function (key, value) {
                    console.log(value);
                    console.log(key);
                    if (value.status == 2) {
                        $('#' + value.bid).html('+');
                    } else {
                        $('#' + value.bid).html(value.name);

                    }

                });
            }

            function getrule() {
                $.ajax({
                    url: "{:Url('lists')}",
                    type: 'get',
                    dataType: 'json',
                    data: {tag_id: tag_id}
                })
                    .done(function (res) {
                        if (res.data == null) {
                            layer.msg('没有内容', {
                                time: 1500,
                                icon: 5
                            });
                        } else {
                            rule = res.data;
                            view_menu(rule);
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });
            }

        });
    </script>
</block>
